
<template>
  <!-- 所有唇部页面 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="bg">
        <img
          src="https://www.maccosmetics.com.cn/media/export/cms/new_mpp_headers/MPP_ALL_FACE_1920x480.jpg"
          alt=""
        />
        <!-- 面包屑 -->
        <div class="bread">
          <!-- <bread></bread> -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="item in $route.meta.nav"
              :key="item.id"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <h2>底妆-ALLFACE</h2>
      </div>
    </div>
    <!-- 筛选商品 -->
    <div class="container">
      <div class="filtrate">
        <p>观看：商品</p>
        <!-- <div>
          <span>筛选：</span>
          <div>确认</div>
        </div> -->
        <div class="select-list">
          分类
          <div class="sort">
            <div class="sort1">从低到高</div>
            <div>热门推荐</div>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="product_list">
        <product
          v-for="i in items"
          :key="i.id"
          :color="i.color"
          :cover="i.cover"
          :title="i.title"
          :modul="i.modul"
          :price="i.price"
          :pic="i.pic"
          :pid="i.pid"
          :c="`#fbceb1`"
        >
        </product>
      </div>
    </div>
  </div>
</template>
<script>
import product from "@/components/product.vue";
export default {
  components: {
    product,
  },
  data() {
    return {
      items: [],
      c: "#fbceb1",
      value: "",
      cid: 1,
      page: 1,
      pagesize: 20,
    };
  },
  methods: {
    getItem() {
      let params = { cid: 2, page: 1, pagesize: 20, pid: this.items.pid };
      this.$http.productApi.queryAll(params).then((res) => {
        // console.log(res);
        this.items = res.data.data;
      });
    },
  },
  mounted() {
    this.getItem();
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  position: relative;
  .bg {
    height: 300px;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    .bread {
      position: absolute;
      top: 20px;
      left: 15%;
      ::v-deep .el-breadcrumb__inner {
        color: #fff;
      }
      ::v-deep .el-breadcrumb__separator {
        color: #fff;
      }
    }
    h2 {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 7rem;
      position: absolute;
      left: 0;
      top: 80px;
    }
  }
}
.container {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-wrap: wrap;

  .filtrate {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 0 50px;
    .select-list {
      width: 200px;
      height: 50px;
      background: #000;
      color: #fff;
      font-size: 16px;
      padding-left: 10px;
      position: relative;
      text-align: center;
      line-height: 3;
      overflow: hidden;
      &.active {
        background-color: #fff;
        color: #000;
      }
      .sort {
        color: #000;
        height: 0;
        width: 100%;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        background: #fff;
        position: absolute;
        top: 50px;
        left: 0;
        display: flex;
        flex-direction: column;

        > div {
          // height: 30px;
          padding: 15px 10px;
          text-align: center;
          line-height: 2;
          &:hover {
            background-color: #000;
            color: #fff;
          }
        }
      }
    }
    div {
      display: flex;
    }
  }
  .product_list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>